import React from "react"
import { connect } from "react-redux"
import { Link } from "react-router-dom"

import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  SearchWrapper,
  NavSearch,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoItem,
  Addition,
  Button
} from "./style"

import * as actionCreator from "./actionCreators"

import { logoutAction } from "../../pages/login/actionCreators"

class Header extends React.Component {
  render() {
    const {
      handleSearchFocus,
      handleSearchBlur,
      searchFocused,
      list,
      page,
      totalPage,
      handleMouseEnter,
      handleMouseLeave,
      mouseIn,
      handleSwitchClick,
      login,
      dispatchLogout
    } = this.props

    const newList = list.toJS()
    const pageList = []
    console.log('newList', newList)

    for (let i = (page - 1) * 10; i < page * 10; i++) {
      if (!newList[i]) break
      pageList.push(newList[i])
    }

    return (
      <section className="homeTop">
        <HeaderWrapper>
          <Link to="/">
            <Logo />
          </Link>
          <Nav>
            <Link to="/">
              <NavItem className="left">首页</NavItem>
            </Link>
            <NavItem className="left">下载App</NavItem>
            {login ? (
              <NavItem onClick={dispatchLogout} className="right">
                退出
              </NavItem>
            ) : (
              <Link to="/login">
                <NavItem className="right">登录</NavItem>
              </Link>
            )}
            <NavItem className="right">
              <i className="iconfont">&#xe636;</i>
            </NavItem>
            <SearchWrapper>
              <NavSearch
                className={searchFocused ? "focus" : ""}
                onFocus={() => {
                  handleSearchFocus(list)
                }}
                onBlur={handleSearchBlur}
              />
              <i className="iconfont search">&#xe617;</i>
              {searchFocused || mouseIn ? (
                <SearchInfo
                  onMouseEnter={handleMouseEnter}
                  onMouseLeave={handleMouseLeave}
                >
                  <SearchInfoTitle title="热门搜索">
                    热门搜索
                    <SearchInfoSwitch
                      onClick={() => {
                        handleSwitchClick(page, totalPage, this.icon)
                      }}
                    >
                      <i
                        ref={icon => (this.icon = icon)}
                        className="iconfont spin"
                      >
                        &#xe851;
                      </i>
                      换一批
                    </SearchInfoSwitch>
                  </SearchInfoTitle>
                  <ul>
                    {pageList.map(item => (
                      <SearchInfoItem key={item}>{item}</SearchInfoItem>
                    ))}
                  </ul>
                </SearchInfo>
              ) : (
                ""
              )}
            </SearchWrapper>
            <Addition>
              <Button className="reg">注册</Button>
              <Link style={{ display: "inline-block" }} to="/write">
                <Button className="writting">
                  <i className="iconfont">&#xe81a;</i>
                  写文章
                </Button>
              </Link>
            </Addition>
          </Nav>
        </HeaderWrapper>
      </section>
    )
  }
}

const mapStateToProps = state => {
  return {
    // searchFocused: state.get('header').get('searchFocused')
    searchFocused: state.getIn(["header", "searchFocused"]),
    list: state.getIn(["header", "list"]),
    page: state.getIn(["header", "page"]),
    totalPage: state.getIn(["header", "totalPage"]),
    mouseIn: state.getIn(["header", "mouseIn"]),
    login: state.getIn(["login", "islogin"])
  }
}

const mapDispatchToProps = dispatch => {
  return {
    handleSearchFocus(list) {
      if (list.size === 0) dispatch(actionCreator.getList())
      dispatch(actionCreator.getSearchFocusAction())
    },
    handleSearchBlur() {
      dispatch(actionCreator.getSearchBlurAction())
    },
    handleMouseEnter() {
      dispatch(actionCreator.getMouseEnterAction())
    },
    handleMouseLeave() {
      dispatch(actionCreator.getMouseLeaveAction())
    },
    handleSwitchClick(page, totalPage, icon) {
      // 让 spin 图标转动
      // 匹配非数字
      let originAngle = icon.style.transform.replace(/[^0-9]/gi, "")
      console.log("originAngle", originAngle)
      if (originAngle) {
        originAngle = parseInt(originAngle, 10)
      } else {
        originAngle = 360
      }
      icon.style.transform = `rotate(${originAngle + 360}deg)`

      // 改变 page 并更换标签
      if (page < totalPage) {
        page++
      } else {
        page = 1
      }

      dispatch(actionCreator.getSwitchClickAction(page))
    },
    dispatchLogout() {
      dispatch(logoutAction())
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Header)
